<template>

 

   <div class="main-content" >
      <div class="top">
        <div class="top-left">
          <div class="top-left-top">
           <div class="top-left-top-left">
              <!-- 头像 -->
            <el-row class="demo-avatar demo-basic">
              <el-col :span="12">
      <div class="sub-title">
      </div>
      <div class="demo-basic--circle">
        <div class="block "><el-avatar :size="50" :src="circleUrl" class="tx"></el-avatar></div>
        
      </div>
    </el-col> 
     </el-row> 
           </div>
           <div class="top-left-top-right">
             <!-- 昵称 -->
             <i>{{$store.state.userInfo.username}}</i>
           </div>

            <!-- 设置按钮 -->
            <i class="sz iconfont iconshezhi" @click="jumpToMine"></i>
          </div>
           <div class="top-left-bottom">
             <el-calendar v-model="value" class="rl">
</el-calendar>
          </div>
        </div>
        <div class="top-right">
          <div class="toptop">
            <div class="top-right-left">
            <div class="top-right-left-top">早上好</div>
            <div class="top-right-left-bottom">
              <span>{{this.weather.country}} {{this.weather.city}}</span>

<p> {{this.weather.wea}}</p>
          <i  class="iconfont iconduoyun1"></i>
            </div>
          </div>
          <div class="top-right-right">通知公告</div>
          </div >
          <div class="bottombottom" ref="echartsGeneral">
任务具体情况 
          </div>
       
        </div>
      </div>
      <!-- //阶段学习情况 -->
      <div class="bottom">
        <div class="bottom-left">
          <div class="achieveCharts" ref="achieveCharts"></div>
        </div>
        <!-- 期望课程 -->
        <div class="bottom-right">
          <div class="expectCharts" ref="expectCharts"></div>
        </div>
      </div>
   </div>
   

  
</template>

<script>
import {getTarskData,getRateData,getExpectData,getlog,getWeather} from "@/api"
//1.引入ecahrts
import * as echarts from "echarts"
import { color } from 'echarts';

//2.初始化echarts
//需要一个dom容器
//需要一个配置项option
//特别注意！！容器一定要有高度
export default {
  data () {
      return {
        nName:"",
         value: new Date(),
         weather:{

         },
        circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
      }
    },
  methods:{
jumpToMine(){
  this.$router.push({name:"mine"})
},

Weather(){
getWeather()
.then(res=>{
  console.log(111);
  console.log(res.data.data[0]);
  this.weather=res.data.data[0]
})
}

  },

  mounted(){
  //    getlog()
  // .then(res=>{
  //   console.log(res.data.data[0]);
  //   this.nName=res.data.data[0].username
  // })
//     if(this.nName===""){
//       console.log(1);
// this.nickName();
this.Weather()
//     }
   
    this.$nextTick(function(){
      let option= {
    tooltip: {
        trigger: 'item',
        show:true
    },
    legend: {
        top: 'bottom',
        left: 'right',
        orient:"vertical"  //排列方式垂直
    },
    color:["#2DB5A1","#EA430C","pink"],
    series: []
};


//任务概览
      let generalCharts=echarts.init(this.$refs.echartsGeneral)  //传递一个dom元素
 
   //传入配置项
   generalCharts.setOption(option)
  //发送异步请求
  getTarskData()
  .then(res=>{
    let data=res.data.data
    console.log(data);
    let series= {
            name: '管理状态',
            type: 'pie',
            radius: ['40%', '60%'],  //内环 外环
            avoidLabelOverlap: false,
            label: {
                show: true,
                position: 'center' , //让数据提示在圆环中间
                formatter:"{d}%",
                textStyle:{
                  fontSize:"21",
                  color:"pink",
                  fontWeight:'bold'
                }
            },
            emphasis: {  //强调 鼠标移入到饼图上会对该数据进行强调
                label: {
                    show: false,
                    fontSize: '16',
                    fontWeight: 'bold',
                    color:"red"
                }
            },
            labelLine: {
                show: true
            },
            data
        }
        generalCharts.setOption({
          series
        })
  })
   
   //阶段学习情况
   let achieveCharts=echarts.init(this.$refs.achieveCharts)
   //期望课程
   let expectCharts=echarts.init(this.$refs.expectCharts)
   //折线图选项
   let acheiveChartOption={
    xAxis: {//x轴
        type: 'category',
        data: [],
        show:false
    },
    yAxis: {
        type: 'value',
        show:false //是否隐藏坐标轴
    },
    label:{ //提示内容
      show:true,
      formatter:"{b}:{c}" //格式化内容  c 数据
    },
  
    series: []
};
//期望模块饼图选项
let expectChartsOption={
    tooltip: {
        show:true,
        trigger: 'item' //散点图和饼图的可以使用item触发
    },
    legend: {//表示数据的提示
         	top: '5%',//距离顶部偏移5%
            left: 'right',//靠左排列的位置
            top: 'bottom',//靠顶部排列的位置
            orient: 'vertical',//排列方向 horizontal
            itemWidth: 10, //提示框的宽度
            itemHeight: 10,//提示框的高度
            textStyle:{//设置字体样式
             // color:"#fff"//颜色
            }
    },
    color: ['red', 'pink', '#88B7E3'],//设置环形图颜色
    series: [ //系列
       
    ]
};
achieveCharts.setOption(acheiveChartOption)
//折线图异步请求
getRateData()
.then(res=>{
  let data=res.data.data
  let xData=[]
  let sData=data.map(item=>{
    xData.push(item.name)
    return item.rate
  })

  achieveCharts.setOption({
     xAxis:{
      data:xData
    },
    series:[
      {
        data: sData,
        type: 'line',
        smooth: true//是否开启平滑曲线   1
    }
    ]
  }
   
  )
})
expectCharts.setOption(expectChartsOption)
//底部环形图
getExpectData()
.then(res=>{
  let data=res.data.data
  let sData=data.map(item=>{
    return {
      value:item.rate,
      name:item.title
    }
  })
  expectCharts.setOption({
series: [{
            name: data.desc,
            type: 'pie',
            radius: ['40%', '70%'],//半径
            avoidLabelOverlap: true, //重要属性 防止标签重叠
             label: { //文字数据提示
                show: true,
                position: 'outer',//可以是inner center outer设置提示位置
                formatter: "{b}:{d}%",//\n\n很关键 能够让文字显示在牵引线上方
                // padding: [0, -50]//文字的padding位置
              },
            emphasis: {//强调(当鼠标移入的时候显示的强调内容)
                label: {
                    show: true,
                    fontSize: '10',
                    fontWeight: 'bold'
                }
            },
            labelLine: { //牵引线
                show: true,
                 length:10, //牵引线长度
                 length2:10,
                 lineStyle: {//牵引线颜色
                    color: '#808080'
                },
            },
            data: sData
        }]
  })
})
   window.onresize = function () { 
     generalCharts.resize() ;
    expectCharts.resize();
    achieveCharts.resize()
     }
   })
  }
};


</script>
<style >
   .main-content{
     width: 100%;
     height: 100%;
     margin-top: 6px;
     flex-direction: column;
    flex-direction: column;
   }
   .top{
     height: 66%;
      border: 1px solid palevioletred;

      margin-bottom: 2px;
      display: flex;
   }
   .top-left{
     width: 30%;
     display: flex;
      border: 1px solid palevioletred;
      flex-direction: column;
   }
   .top-left-top{
     height: 40%;
     width: 100%;

      border: 1px solid palevioletred;
position:relative;
display: flex;
   }
.top-left-top-left{
flex:5;
padding:25px 10px;
}
.top-left-top-right{
flex:5;
padding:25px 10px;

}
/* 设置 */
   .sz{
     position: absolute;
     top:4px ;
     right:4px
   }
    .top-left-bottom{
     height: 60%;
     width: 100%;
      border: 1px solid palevioletred;

   }
   .top-right{
     width: 70%;
      border: 1px solid palevioletred;
display: flex;
flex-direction: column;
   }
   .toptop{
height: 50%;
width: 100%;
      border: 1px solid palevioletred;
      display: flex;
   }
   .top-right-left{
    height: 100%;
     width: 40%;
      border: 1px solid palevioletred;
display: flex;
flex-direction: column;
   }
   .top-right-left-top{
     height: 50%;
     width: 100%;
      border: 1px solid palevioletred;

   }
    .top-right-left-bottom{
     height: 50%;
     width: 100%;
      border: 1px solid palevioletred;

   }
      .top-right-right{
    height: 100%;
     width: 60%;
      border: 1px solid palevioletred;

   }
   
      .bottombottom{
height: 50%;
width: 100%;
      border: 1px solid palevioletred;
   }

   .bottom{
     height: 33%;
     display: flex;
      border: 1px solid palevioletred;
   }
  .bottom-left{
    flex: 6;
    /* width: 60%;
    height: 100%; */
    margin-right: 10px ;
  }
  .bottom-right{
    flex: 4;
     /* width: 40%;
    height: 100%; */
  }
  .achieveCharts{
    height: 100%;
  }
  .expectCharts{
    height: 100%;
  }
.tx{
    height: 80px !important;
    width: 80px !important;
   
  }
 .el-calendar-table .el-calendar-day{
    height: 10px;
  }
  /* .rl{
    width: 100%;
    height: 100%;
    overflow: hidden;
  } */
  .el-calendar-table thead th {
    padding: 0px 0;}
    .el-calendar__body {
    padding: 0px ;
}
.el-calendar__header {
   
    padding: 4px 8px;
   
}
</style>